<template>
		<!-- bookedit区域 -->
		<div class="bookedit">
			<h3>{{title}}</h3>
			<hr>
			<table>
				<tr>
					<td>商品名称</td>
					<td><input type="text" v-model="form.name"></td>
				</tr>
				<tr>
					<td>商品序号</td>
					<td><input type="text" v-model="form.sn"></td>
				</tr>
				<tr>
					<td>商品价格</td>
					<td><input type="text" v-model="form.price"></td>
				</tr>
				<tr>
					<td>商品厂商</td>
					<td><input type="text" v-model="form.author"></td>
				</tr>
				<tr>
					<td>商品出处</td>
					<td><input type="text" v-model="form.publisher"></td>
				</tr>
				<tr>
					<td>出厂时间</td>
					<td><input type="date" v-model="tpublish" ></td>
				</tr>
				<tr>
					<td>商品类型</td>
					<td>
						<select v-model="form.bookType.id">
							<option v-for="item in types" :value="item.id" :key="item.id">
								{{item.type}}
							</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<!-- :src="`${$Imgurl}/api/public/showImg/${form.picture}`" -->
						<div style="width: 6vw; height: 5vw;">
							<img :src="`${$Imgurl}/api/public/showImg/${form.picture}`"/>
						</div>
					</td>
					<td><input type="file" ref="pic"></td>
				</tr>
			</table>
			<hr>
			<div class="bookedit_bottom">
				<div>
					<button @click="back2List()">返回列表</button>
				</div>
				<div style="margin-right: 10%;">
					<button @click="submit()">提交</button>
				</div>
			</div>
		</div>
</template>

<script>
	export default {
		name: 'Bookedit',
		data(){
			return {
				form : {
					id : '',
					name : '',
					sn : '',
					price : '',
					author : '',
					publisher : '',
					tpublish : '',
					picture : '',
					bookType : {
						id : '',
						"type" : ''
					}
				},
				title : '商品添加...',
				// tpublish : '',
				types : []
			}
		},
		methods:{
			
			back2List(){
				this.$router.push('/adm/book');
			}
		},
		computed:{
			tpublish : {
				get(){
					let d = new Date(this.form.tpublish);
					let days = 0;
					if( d.getDate() <= 9 ){
						days = '0'+d.getDate();
					}else{
						days = d.getDate();
					}
					let s = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + days;
					return s;
					}
				},
				// set(value){
				// 	let d = new Date(value);
				// 	this.form.tpublish = d.getTime();
				// }
		},
			// filterTimes(){
			// 	return (x)=>{
			// 		// 获取当前系统时间戳
			// 		let now = new Date(x)
			// 		// 计算提取天数+小时+分钟+秒数
			// 		let ynum = now.getFullYear();
			// 		let mnum = now.getMonth()+1;
			// 		let dnum = now.getDate();
			// 		// 保证所有的输出都是俩位数
			// 		if( mnum <= 9 ){
			// 			mnum = '0'+mnum;
			// 		}
			// 		if( dnum <= 9 ){
			// 			dnum = '0'+dnum;
			// 		}
			// 		return `${ynum}-<i>${mnum}-</i>-<i>${dnum}</i>`;
			// 	}
			// }
		mounted(){
			let id = this.$route.query.bookid;
			// console.log(id);
			if (id == undefined || id == "0"){
				this.form = {bookType:{id: 0 }, id:0, name: "", price: 0.0, picture:'' };
				this.form.tpublish = "2021-12-17"
				this.title = "商品添加...";
			}else{
				this.axios.get( '/api/adm/book/findById/' + id ).then( (res)=>{
					this.form = res.data.data;
					// console.log(this.form.tpublish);
					this.title = "修改商品";
				} ).catch( (error)=>{
					console.log(error);
				} );
			}
			this.axios.get( '/api/public/type/findAll' ).then( (res) => {
				this.types = res.data.data;
				console.log(this.types);
			}).catch( (error)=>{
				console.log(error);
			} );
		}
	}
</script>

<style>
	.bookedit{
		width: 95%;
		margin: 0 auto;
	}
	.bookedit h3{
		margin-left: 5%;
	}
	.bookedit table{
		width: 80%;
		line-height: 30px;
		font-size: 18px;
		margin-left: 10%;
	}
	.bookedit table tr{
		
	}
	.bookedit table tr td{
		margin-left: 5%;
		line-height: 55px;
		text-indent: 1em;
		/* border: 1px solid black; */
	}
	.bookedit table tr td:first-child{
		width: 20%;
	}
	.bookedit table tr td input{
		width: 55%;
		height: 35px;
		border-radius: 6px;
		border: 0;
		text-indent: 1em;
		outline: none;
	}
	.bookedit table tr td select{
		width: 25%;
		height: 35px;
		border-radius: 6px;
		border: 0;
		text-indent: 1em;
		outline: none;
	}
	.bookedit table tr td img{
		width: 100%;
		height: 100%;
	}
	.bookedit .bookedit_bottom{
		display: flex;
		justify-content: space-between;
		font-size: 22px;
	}
	.bookedit .bookedit_bottom button{
		width: 100px;
		height: 35px;
		border-radius: 6px;
		border: 0;
		background-color: #4169E1;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}
</style>
